<template>
  <div>
    <h1>作用域插槽</h1>
    <p>用于反向传递数据</p>
    <div class="container">
      <Category title="游戏">
        <template slot-scope="mydata">
          {{ mydata }}
        </template>
      </Category>

      <Category title="游戏">
        <template slot-scope="mydata">
          <ol>
            <li v-for="(game,index) in mydata.games" :key="index">{{game}}</li>
          </ol>
        </template>
      </Category>

      <Category title="游戏">
        <template slot-scope="{games}">
            <h4 v-for="(game,index) in games" :key="index">{{game}}</h4>
        </template>

      </Category>
    </div>
  </div>
</template>

<script>
import Category from "./components/Category";

export default {
  name: 'App',
  components: {Category}
}
</script>
<style>
.container {
  display: flex;
  justify-content: space-around;
}
h1{ background-color: #1eb987;
  text-align: center;
width: 100%}
ul {
  text-align: left;
}
</style>
